var buttons_div = Vue.component(
    'buttons_div',
    {
        props:['bn'],
        template:`<button v-on:click="changebn">show {{bn}}</button>`,
        data:function(){
            return {

            };
        },
        methods:{
            changebn : function(){
                console.log('changebn');
                this.$emit('changebn' , this.bn);
            }
        }
    }
);

var isCom1 = Vue.component(
    'isCom1',
    {
        template:'<div>isCom1</div>'
    }
);

var isCom2 = Vue.component(
    'isCom2',
    {
        template:'<div>isCom2</div>'
    }
);

var isCom3 = Vue.component(
    'isCom3',
    {
        template:'<div>isCom3</div>'
    }
);

// inheritAttrs表示不在本props中的变量要不要？
// 要，在最外层tag增加attr。
var dCom = Vue.component(
    'dCom',
    {
        props:["msg" , "c" ],
        template:`<div class="d_class">div des {{msg}} {{c}} </div>`,
        inheritAttrs:true
    }
);

// $attrs表示自身所有attrs都往子component自动绑定。
var cCom = Vue.component(
    'cCom',
    {
        template:`
          <div>
          div child , props is not defined 
          d-com 上的所有属性都是多余的。
          <d-com v-bind="$attrs" v-bind:cData1="cDate1" class="classFromC"></d-com>
          <br>
          </div>`,
        components:{
            "dCom":dCom
        },
        data:function(){
            return {
                "cDate1":"1"
            }
        },
        inheritAttrs:true
    }
);

var pCom = Vue.component(
    'pCom',
    {
        props:["msg" , "c"],
        inheritAttrs: true,
        template:`
          <div>
          div parent {{msg}} {{c}}
          <br>
          <c-com v-bind:msg="msg" v-bind:c="c" t="sth"></c-com>
          </div>`,
        components:{
            "cCom":cCom
        }
    }
);


